<template>
  <div class="tab-title-page goods_list">
    <el-tabs
      v-model="activeName"
      class="flex-1 nav_tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane
        :label="`已上架商品(${count.status_put})`"
        name="1"
      />
      <el-tab-pane
        :label="`已下架商品(${count.status_off})`"
        name="2"
      />
    </el-tabs>
    <el-divider class="middle_divider" />
    <div class="child_page">
      <div class="common_form_search">
        <el-form
          ref="searchForm"
          :inline="true"
          :model="searchForm"
        >
          <el-form-item label="商品名称">
            <el-input
              v-model="searchForm.goods_name"
              placeholder="请输入商品名称"
              clearable
            />
          </el-form-item>
          <el-form-item label="供应商">
            <el-input
              v-model="searchForm.shop_name"
              placeholder="请输入供应商"
              clearable
            />
          </el-form-item>
          <el-form-item label="商品品类">
            <el-select
              v-model="searchForm.cate_id"
              placeholder="请选择商品品类"
              clearable
            >
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="租赁方式">
            <el-select
              v-model="searchForm.rent_type"
              placeholder="请选择"
              clearable
            >
              <el-option
                label="随租随还"
                :value="3"
              />
              <el-option
                label="固定租期"
                :value="1"
              />
              <el-option
                label="租完即送"
                :value="2"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <my-date-picker ref="myDatePicker" />
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              @click="search()"
            >查询</el-button>
            <el-button
              size="small"
              @click="reset()"
            >重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-divider />
      <div style="padding:0 30px">
        <div class="flex align-center table-top-btns">
          <h5 class="flex align-center">
            <svg-icon
              style="margin-right:15px"
              icon-class="list"
              :size="15"
            />数据列表
          </h5>
        </div>
        <el-table
          v-show="tableData.length > -1"
          :data="tableData"
          border
        >
          <el-table-column
            align="center"
            label="商品信息"
            width="300"
          >
            <template slot-scope="scope">
              <div class="flex align-center goods_info">
                <el-image
                  style="width: 60px; height: 60px"
                  :src="scope.row.imgurl?$globalObj.imgBaseUrl+scope.row.imgurl:''"
                >
                  <div
                    slot="error"
                    class="image-slot"
                  >
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
                <div class="flex-1 text-left info">
                  <p class="activity">{{ scope.row.id }}
                    <span
                      v-for="(item, index) in scope.row.activity"
                      :key="index"
                      class="inline-block v-middle"
                    >
                      <el-popover
                        placement="top-start"
                        width="160"
                        trigger="hover"
                        :content="item.activity_title"
                      >
                        <img
                          v-if="item.activity_img"
                          slot="reference"
                          class="w-100 h-100"
                          :src="$globalObj.imgApiUrl+item.activity_img"
                          :alt="item.activity_title"
                        >
                      </el-popover>
                      <!-- <img
                    v-if="item.activity_img"
                    class="w-100 h-100"
                    :src="$globalObj.imgBaseUrl+item.activity_img"
                    :alt="item.activity_title"
                  > -->
                    </span>
                  </p>
                  <p>{{ scope.row.title }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column
            align="center"
            width="100"
            prop="pact_type"
            label="租赁方式"
          /> -->
          <el-table-column
            align="center"
            width="100"
            prop="rent_type"
            label="租期类型"
          />
          <el-table-column
            align="center"
            label="库存"
            prop="stock"
          />
          <el-table-column
            align="center"
            prop="cate_name"
            label="品类"
          />
          <el-table-column
            align="center"
            prop="create_time"
            label="创建时间"
            width="100"
          />
          <el-table-column
            align="center"
            prop="shopname"
            label="供应商"
          />
          <el-table-column
            align="center"
            prop="status_name"
            label="状态"
          />
          <el-table-column
            v-if="activeName==2"
            align="center"
            prop="check_reason"
            label="原因"
          />
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="340px"
          >
            <template slot-scope="scope">
              <el-dropdown
                v-if="$hasMethod('#edit')"
                style="margin-right:10px"
                @command="command=>handleCommand(command,scope.row.id)"
              >
                <el-button
                  type="primary"
                  size="mini"
                >编辑<i class="el-icon-arrow-down el-icon--right" /></el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">商品信息</el-dropdown-item>
                  <el-dropdown-item command="2">套餐信息</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-button
                v-if="$hasMethod('#enable')"
                type="warning"
                size="mini"
                @click="changeStatus(scope.row.id, scope.row.status)"
              >{{ scope.row.status==1?'下架':'上架' }}</el-button>
              <el-button
                v-if="$hasMethod('#set')&&activeName==1"
                type="success"
                size="mini"
                @click="setActivity(scope.row.id)"
              >设置活动</el-button>
              <el-dropdown
                v-if="$hasMethod('#view')||activeName==1"
                @command="command=>handleMore(command,scope.row)"
              >
                <span
                  class="el-dropdown-link blue-font"
                  style="margin-left:10px"
                >
                  更多操作<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">查看</el-dropdown-item>
                  <el-dropdown-item
                    v-if="activeName!=1"
                    command="5"
                  >批量复制</el-dropdown-item>
                  <el-dropdown-item
                    v-if="activeName==1"
                    command="2"
                  >分享链接</el-dropdown-item>
                  <el-dropdown-item
                    v-if="activeName==1"
                    command="3"
                  >商品上链</el-dropdown-item>
                  <el-dropdown-item
                    v-if="activeName==1"
                    command="4"
                  >链上商品查询</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <custom-page
          ref="customPage"
          :total="total"
          @getList="getList"
        />
      </div>
    </div>
    <off-dialog
      ref="offDialog"
      @getList="getList"
    />
    <set-dialog
      ref="setDialog"
      @getList="getList"
    />
    <copy-dialog
      ref="copyDialog"
      :goods="selectGoodsRow"
      @getList="getList"
    />
    <share-dialog ref="shareDialog" />
    <el-dialog
      :title="TWCTitle"
      width="500px"
      :visible.sync="isOpenTWC"
    >
      <el-form ref="twcFrom" :model="TWCParams" :rules="rules">
        <el-form-item label="商品id" label-width="80px" prop="productId">
          <el-input v-model="TWCParams.productId" disabled />
        </el-form-item>
        <el-form-item label="商品版本" label-width="80px" prop="productVersion">
          <el-input v-model="TWCParams.productVersion" disabled />
        </el-form-item>
        <el-form-item label="商品名称" label-width="80px" prop="productName">
          <el-input v-model="TWCParams.productName" :disabled="isTWCDisable" />
        </el-form-item>
        <el-form-item label="商品价格" label-width="80px" prop="productPrice">
          <el-input v-model="TWCParams.productPrice" type="number" step="0.01" :disabled="isTWCDisable" />
        </el-form-item>
        <el-form-item label="⼀级行业" label-width="80px" prop="mainClass">
          <!-- <el-input v-model="TWCParams.mainClass" disabled /> -->
          <el-select v-model="TWCParams.mainClass" placeholder="请选择" :disabled="isTWCDisable">
            <el-option
              v-for="item in mainClass"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="二级行业" label-width="80px" prop="subClass">
          <!-- <el-input v-model="TWCParams.subClass" disabled /> -->
          <el-select v-model="TWCParams.subClass" placeholder="请选择" :disabled="isTWCDisable">
            <el-option
              v-for="item in subClass[TWCParams.mainClass]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="供应商" label-width="80px" prop="supplierName">
          <el-input v-model="TWCParams.supplierName" :disabled="isTWCDisable" />
        </el-form-item>
        <el-form-item label="安装服务费" label-width="80px" prop="installPrice">
          <el-input v-model="TWCParams.installPrice" type="number" :disabled="isTWCDisable" />
        </el-form-item>
        <el-form-item label="商品来源" label-width="80px" prop="productOrigin">
          <!-- <el-input v-model="TWCParams.productOrigin" disabled /> -->
          <el-select v-model="TWCParams.productOrigin" placeholder="请选择" :disabled="isTWCDisable">
            <el-option
              v-for="item in productOrigin"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="库存量" label-width="80px" prop="realStock">
          <el-input v-model="TWCParams.realStock" type="number" :disabled="isTWCDisable" />
        </el-form-item>
        <el-form-item label="预估出货量" label-width="80px" prop="estimatedShipment">
          <el-input v-model="TWCParams.estimatedShipment" type="number" :disabled="isTWCDisable" />
        </el-form-item>
        <el-form-item label="商品详情" label-width="80px" prop="productDetailInfo">
          <el-input v-model="TWCParams.productDetailInfo" :disabled="isTWCDisable" />
        </el-form-item>
        <!-- <el-form-item label="商品链接" label-width="80px" prop="productUrl">
          <el-input v-model="TWCParams.productUrl" :disabled="isTWCDisable" />
        </el-form-item> -->
        <el-form-item label="商品品牌" label-width="80px" prop="productBrand">
          <el-input v-model="TWCParams.productBrand" :disabled="isTWCDisable" />
        </el-form-item>
        <el-form-item label="商品规格" label-width="80px" prop="productModel">
          <el-input v-model="TWCParams.productModel" :disabled="isTWCDisable" />
        </el-form-item>
        <el-form-item label="免押金额上限" label-width="80px" prop="depositPrice">
          <el-input v-model="TWCParams.depositPrice" type="number" step="0.01" :disabled="isTWCDisable" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isOpenTWC = false">取 消</el-button>
        <el-button v-if="isTWCBtn" type="primary" @click="editTWCProduct">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import myDatePicker from '@/components/myDatePicker'
import offDialog from './components/offDialog'
import shareDialog from './components/shareDialog'
import setDialog from './components/setDialog'
import copyDialog from './components/copyDialog'
import customPage from '@/components/customPage'
import { goodsGrounding, getGoodsAll, getCategory, getGoodsInfo } from '@/api/audit'
import { twcProduct, twcProductGet, getMainClass, getSubClass } from '@/api/aliPayTWC'
export default {
  components: { myDatePicker, offDialog, shareDialog, setDialog, customPage, copyDialog },
  data() {
    return {
      searchForm: {
        goods_name: '',
        shop_name: '',
        cate_id: '',
        rent_type: '',
        create_time: ''
      },
      activeName: '1',
      count: {
        status_put: 0,
        status_off: 0
      },
      total: 0,
      tableData: [],
      categoryList: [],
      isOpenTWC: false, // 打开商品上链
      isTWCDisable: true, // 是否能修改
      TWCTitle: '', // 商品上链标题
      TWCParams: {
        productId: '',
        productVersion: '',
        productName: '',
        productPrice: 0,
        mainClass: '',
        subClass: '',
        supplierName: '',

        installPrice: 0,
        productOrigin: 1,
        realStock: 0,
        estimatedShipment: 0,
        productDetailInfo: '',
        productUrl: '',
        productBrand: '',
        productModel: '',
        depositPrice: 0
      },
      rules: {
        productId: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        productVersion: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        productName: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        productPrice: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        mainClass: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        subClass: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        supplierName: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        installPrice: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        productOrigin: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        realStock: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        estimatedShipment: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        productDetailInfo: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        productUrl: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        productBrand: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        productModel: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        depositPrice: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      },
      // 一级行业字典
      mainClass: [],
      // 二级行业字典
      subClass: {},
      // 商品来源
      productOrigin: [
        {
          value: 1,
          label: '供应商'
        },
        {
          value: 2,
          label: '租赁机构'
        }
      ],
      selectGoodsRow: null, // 选择的商品
      isTWCBtn: false
    }
  },
  mounted() {
    this.mainClass = getMainClass()
    this.subClass = getSubClass()
    this.getSelectList()
    this.getList()
  },
  methods: {
    // 商品上链
    editTWCProduct() {
      this.$refs['twcFrom'].validate((valid) => {
        if (valid) {
          this.TWCParams.installPrice = Math.floor(this.TWCParams.installPrice * 10000)
          this.TWCParams.productPrice = Math.floor(this.TWCParams.productPrice * 10000)
          this.TWCParams.depositPrice = Math.floor(this.TWCParams.depositPrice * 10000)
          twcProduct(this.TWCParams).then(res => {
            this.isOpenTWC = false
            if (res.status) {
              this.$message({
                message: '上链成功',
                type: 'success'
              })
            }
          })
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    // 设置活动
    setActivity(id) {
      this.$refs.setDialog.goodsId = id
      this.$refs.setDialog.dialogVisible = true
    },
    // 上架/下架
    changeStatus(id, status) {
      if (status == 1) {
        // 下架
        this.$refs.offDialog.goodsId = id
        this.$refs.offDialog.dialogVisible = true
      } else {
        // 上架
        this.$confirm('您确定要上架商品吗？', '上架', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          goodsGrounding(id).then(res => {
            this.getList(true)
          })
        }).catch(() => { })
      }
    },
    handleMore(command, good) {
      const goodsId = good.id
      if (command == 1) {
        // 查看
        this.$router.push({ name: 'goodsView', params: { goodsId }})
      } else if (command == 2) {
        // 分享链接
        this.$refs.shareDialog.goodsId = goodsId
        this.$refs.shareDialog.dialogVisible = true
      } else if (command == 3) {
        this.isOpenTWC = true
        this.isTWCDisable = true
        this.TWCTitle = '商品上链'

        this.isTWCBtn = false
        getGoodsInfo(goodsId).then(goodsInfo => {
          // this.goodsInfo.carousel_images = this.goodsInfo.carousel_images.split(',')
          // 商品上链
          const params = {
            productId: good.id,
            productVersion: good.change_version
          }
          twcProductGet(params).then(res => {
            this.isTWCDisable = false
            this.isTWCBtn = true
            if (res.status && res.data.response_data) {
              this.TWCParams = JSON.parse(res.data.response_data)
              this.TWCParams.installPrice = this.TWCParams.installPrice / 10000
              this.TWCParams.productPrice = this.TWCParams.productPrice / 10000
              this.TWCParams.depositPrice = this.TWCParams.depositPrice / 10000
            } else {
              // debugger
              this.TWCParams = {
                productId: goodsInfo.id,
                productVersion: goodsInfo.change_version,
                productName: goodsInfo.cate_name,
                productPrice: goodsInfo.product_price, // 精确到毫厘，即123400表示12.34元
                mainClass: goodsInfo.main_class,
                subClass: goodsInfo.sub_class,
                supplierName: goodsInfo.shopname,

                installPrice: goodsInfo.install_price,
                productOrigin: goodsInfo.product_origin,
                realStock: goodsInfo.stock,
                estimatedShipment: goodsInfo.estimated_shipment,
                productDetailInfo: goodsInfo.title,
                productUrl: goodsInfo.product_url,
                productBrand: goodsInfo.product_brand,
                productModel: goodsInfo.product_model,
                depositPrice: goodsInfo.deposit_rice// 精确到毫厘，即123400表示12.34元
              }
            }
          })
        })
      } else if (command == 4) {
        this.TWCTitle = '商品上链查询'
        this.isTWCDisable = true
        this.isTWCBtn = false
        const params = {
          productId: good.id,
          productVersion: good.change_version
        }
        twcProductGet(params).then(res => {
          if (res.status && res.data.response_data) {
            this.isOpenTWC = true
            this.TWCParams = JSON.parse(res.data.response_data)
            this.TWCParams.installPrice = this.TWCParams.installPrice / 10000
            this.TWCParams.productPrice = this.TWCParams.productPrice / 10000
            this.TWCParams.depositPrice = this.TWCParams.depositPrice / 10000
          } else {
            this.$message({
              message: '信息获取失败或商品还未上链',
              type: 'error'
            })
          }
        })
      } else if (command == 5) {
        this.$refs.copyDialog.dialogVisible = true
        this.selectGoodsRow = good
      }
    },
    handleCommand(command, goodsId) {
      if (command == 1) {
        this.$router.push({ name: 'goodsBaseEdit', params: { editId: goodsId }})
      } else {
        this.$router.push({ name: 'goodsMealInfo', params: { goodsId }})
      }
    },
    // 查询
    search() {
      const pickerVal = this.$refs.myDatePicker.getVal()
      if (pickerVal !== 'error') {
        this.searchForm.create_time = pickerVal
        this.$refs.customPage.page = 1
        this.getList()
      }
    },
    // 重置
    reset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset()
      }
      this.searchForm = {
        goods_name: '',
        shop_name: '',
        cate_id: '',
        rent_type: '',
        create_time: ''
      }
      this.getList()
    },
    handleClick(tab) {
      this.activeName = tab.name
      this.$refs.customPage.page = 1
      this.getList()
    },
    // 获取数据
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      if (!flag) {
        this.tableData = []
      }
      getGoodsAll({
        page,
        pageSize,
        ...this.searchForm,
        goods_status: this.activeName
      }).then(res => {
        this.tableData = res.data || []
        this.total = res.total
        for (const key in this.count) {
          this.count[key] = res.count[key]
        }
      })
    },
    getSelectList() {
      getCategory().then(res => {
        this.categoryList = res || []
      })
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.getList(true)
    })
  }
}
</script>
<style lang="scss" scoped>
.common_form_search {
  padding: 15px 30px 0;
}
.child_page {
  padding-bottom: 15px;
}
.goods_info {
  .info {
    margin-left: 10px;
    p {
      color: #666666;
    }
    p:first-child {
      color: #999999;
    }
  }
}
.activity {
  line-height: 24px;
  span {
    width: 20px;
    height: 20px;
    margin-left: 10px;
  }
}
</style>
